<template>
	<view>
		<view class="top_up">
			<view class="top">充值金额</view>
			<view class="money-body">
				<view class="icon">
					￥
				</view>
				<view class="input">
					<input style="width: 500rpx;" type="number" v-model="money" placeholder="请输入金额,最低充值10元" />
				</view>
			</view>
		</view>

		<view class="pay">
			<view class="pay-text">
				<text>支付方式</text>
			</view>
			<view class="pay-right">
				<view class="icon">
					<img src="../../static/wx1.png">
				</view>
				<view class="text">
					<text>微信支付</text>
				</view>
			</view>
		</view>

		<view class="bottom" @click="recharge">
			<text>立即充值</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			money:null,
			fding:true,
		};
	},
	methods: {
		async recharge() {
			// 严重金额为数字并且大于0允许小数点后两位
			if (this.money && this.money >= 10) {
				if(this.fding){
					this.fding = false
					setTimeout(()=>{
						this.fding = true
					},3000)
					await this.$http({
						url:'api/Wechat/wxRecharge1',
						data:{
							recharge_money:this.money
						}
					}).then(msg=>{
						const data = msg.data
						let that = this
						console.log(data,'data')
						uni.requestPayment({
							timeStamp: data.rows.timestamp,
							nonceStr: data.rows.nonce_str,
							package: data.rows.package,
							signType: "RSA",
							paySign: data.rows.pay_sign,
							// prepay_id:data.rows.prepay_id,
							success: function(res) {
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								
								this.money =''
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},500)
							},
							fail: function(res) {
								console.log(res,'res')
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							},
						})
					})
				}
			} else {
				uni.showToast({
					title: '金额最低充值10元',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.top_up {
	width: 690rpx;
	margin: 20rpx auto 24rpx auto;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	padding-bottom: 30rpx;

	.top {
		padding: 40rpx 0 0 24rpx;
		width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 0rpx;
	}

	.money-body {
		display: flex;
		height: 48rpx;
		font-size: 48rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 35rpx;
		margin: 50rpx 0 0 24rpx;

		.input {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			margin-left: 18rpx;
		}
	}

	.border {
		width: 642rpx;
		height: 1rpx;
		background: #ECECEC;
		opacity: 1;
		margin: 28rpx 24rpx 34rpx;
	}

	.text {
		height: 26rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		line-height: 26rpx;
		margin: 28rpx 0rpx 0 26rpx;
	}
}

.body {
	width: 690rpx;
	height: 328rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: 20rpx 0 0 30rpx;

	.body-text {
		padding: 40rpx 0 0 24rpx;
		width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		line-height: 30rpx;
	}

	.body-price {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 10rpx 0 0 30rpx;

		.click-background {

			width: 182rpx;
			height: 76rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			opacity: 1;
			border: 2rpx solid #F99529 !important;
			z-index: 999;
		}

		.body-price-radio {
			margin-top: 30rpx;
			width: 182rpx;
			height: 76rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			opacity: 1;
			border: 2rpx solid #707070;
			text-align: center;

			text {
				width: 60rpx;
				height: 28rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				line-height: 76rpx;
			}
		}
	}
}

.pay {
	display: flex;
	justify-content: space-between;
	width: 690rpx;
	height: 108rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: 20rpx 0 120rpx 30rpx;

	.pay-text {
		padding: 40rpx 0 0 24rpx;
	}

	.pay-right {
		display: flex;

		.icon {
			img {
				width: 46rpx;
				height: 46rpx;
				margin: 36rpx 30rpx;
			}
		}

		.text {
			width: 196rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			padding: 40rpx 24rpx 0 0;
		}

	}
}

.bottom {
	width: 690rpx;
	height: 96rpx;
	background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
	border-radius: 83rpx 83rpx 83rpx 83rpx;
	opacity: 1;
	margin-left: 30rpx;
	text-align: center;
	line-height: 96rpx;

	text {
		width: 144rpx;
		height: 36rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
	}
}</style>
